
<template>
    <view class="uni-container">
        <uni-forms ref="form" v-model="formData" :rules="rules" validateTrigger="bind" @submit="submit">
            <uni-forms-item name="id" label="编号">
  <input type="number" @input="binddata('id', $event.detail.value)" class="uni-input-border" :value="formData.id" />
</uni-forms-item>
<uni-forms-item name="monthlySale" label="月售量">
  <input type="number" @input="binddata('monthlySale', $event.detail.value)" class="uni-input-border" :value="formData.monthlySale" />
</uni-forms-item>
<uni-forms-item name="shopid" label="店铺id">
  <input type="number" @input="binddata('shopid', $event.detail.value)" class="uni-input-border" :value="formData.shopid" />
</uni-forms-item>
<uni-forms-item name="shop" label="店铺">
  <uni-data-checkbox :range="formOptions.shop_range" :multiple="true" @change="binddata('shop', $event.detail.value)" v-model="formData.shop" />
</uni-forms-item>
<uni-forms-item name="stock" label="剩余库存">
  <input type="number" @input="binddata('stock', $event.detail.value)" class="uni-input-border" :value="formData.stock" />
</uni-forms-item>
<uni-forms-item name="visite" label="浏览量">
  <input type="number" @input="binddata('visite', $event.detail.value)" class="uni-input-border" :value="formData.visite" />
</uni-forms-item>
<uni-forms-item name="isSold" label="是否销售">
  <uni-data-checkbox :range="formOptions.isSold_range" @change="binddata('isSold', $event.detail.value)" v-model="formData.isSold" />
</uni-forms-item>
<uni-forms-item name="posid" label="排序">
  <input type="number" @input="binddata('posid', $event.detail.value)" class="uni-input-border" :value="formData.posid" />
</uni-forms-item>
<uni-forms-item name="score" label="评分">
  <input placeholder="商品评分，1-10" type="number" @input="binddata('score', $event.detail.value)" class="uni-input-border" :value="formData.score" />
</uni-forms-item>

            <view class="uni-button-group">
                <button style="width: 100px;" type="primary" class="uni-button" @click="submitForm">提交</button>
                <navigator open-type="navigateBack" style="margin-left: 15px;"><button style="width: 100px;" class="uni-button">返回</button></navigator>
            </view>
        </uni-forms>
    </view>
</template>

<script>
    import validator from '@/js_sdk/validator/cloud_goods.js';

    const db = uniCloud.database();
    const dbCmd = db.command;
    const dbCollectionName = 'cloud_goods';

    function getValidator(fields) {
        let reuslt = {}
        for (let key in validator) {
            if (fields.includes(key)) {
                reuslt[key] = validator[key]
            }
        }
        return reuslt
    }

    export default {
        data() {
            return {
                formOptions: {
  "isSold_range": [
    {
      "text": "下架",
      "value": 0
    },
    {
      "text": "在售",
      "value": 1
    }
  ]
},
                formData: {
  "id": null,
  "src": null,
  "title": null,
  "subTitle": null,
  "price": null,
  "originPrice": null,
  "monthlySale": null,
  "shopid": null,
  "shop": [],
  "stock": null,
  "visite": null,
  "isSold": 0,
  "posid": null,
  "score": null
},
                rules: {
                    ...getValidator(["id","src","title","subTitle","price","originPrice","monthlySale","shopid","stock","visite","isSold","posid","score","shop"])
                }
            }
        },
        onReady() {
            this.$refs.form.setRules(this.rules)
        },
        methods: {
            /**
             * 触发表单提交
             */
            submitForm() {
                this.$refs.form.submit();
            },

            /**
             * 表单提交
             * @param {Object} event 回调参数 Function(callback:{value,errors})
             */
            submit(event) {
                const {
                    value,
                    errors
                } = event.detail

                // 表单校验失败页面会提示报错 ，要停止表单提交逻辑
                if (errors) {
                    return
                }
                uni.showLoading({
                    title: '提交中...',
                    mask: true
                })
                // 使用 uni-clientDB 提交数据
                db.collection(dbCollectionName).add(value).then((res) => {
                    uni.showToast({
                        title: '新增成功'
                    })
                    this.getOpenerEventChannel().emit('refreshData')
                    setTimeout(() => uni.navigateBack(), 500)
                }).catch((err) => {
                    uni.showModal({
                        content: err.message || '请求服务失败',
                        showCancel: false
                    })
                }).finally(() => {
                    uni.hideLoading()
                })
            }
        }
    }
</script>

